<template>
  <teleport v-if="open" to="body">
    <div class="proc-ins" :style="{'z-index': zIndex}">
      <div class="proc-ins-header">
        <div class="header-title">发起审批</div>
        <div class="header-cancel" @click="close">取 消</div>
      </div>
      <div class="proc-ins-body">
        <el-card class="proc-card">
          <div class="proc-title">{{loading ? '加载中...' : proc.procName}}</div>
          <v-form-render ref="vFormRef" v-if="!loading" :form-json="formJson" :form-data="formData"
                         :option-data="optionData" @formChange="onFormDataChange">

          </v-form-render>
        </el-card>
        <el-card class="proc-card">
          <div class="proc-title">流程</div>
          <ProcNodeForCreate :nodes="nodes"/>
          <div class="proc-submit">
            <el-button class="btn" type="primary" @click="submit(1)">提交</el-button>
<!--            <el-button class="btn" @click="submit(0)">保存草稿</el-button>-->
          </div>
        </el-card>
      </div>

    </div>
  </teleport>
</template>

<script setup name="CreateProcInst">
import ProcNodeForCreate from "./ProcNodeForCreate.vue"
import { addInst, updateInst, calculateNode } from "@/api/bpm/inst";
import { getProc } from "@/api/bpm/proc";

import {getCurrentInstance, nextTick, reactive, ref, defineEmits} from "vue";
import {updateApp} from "@/api/system/app";

const { proxy } = getCurrentInstance();

const emit = defineEmits(["close"]);
const open = ref(false);
const loading = ref(true);
const zIndex = ref(null);
const vFormRef = ref(null);
const optionData = reactive({});
const proc = ref(null);
const procInstId = ref(null);
const nodes = ref(null);
let formJson = reactive({});
let formData = reactive({});


function show(procId, procInstId) {
  zIndex.value = proxy.nextZIndex()
  open.value = true
  getProc(procId).then(response => {
    proc.value = response.data
    formJson = proc.value.formConfig
    loading.value = false
  });
}


function submit(flag) {
  vFormRef.value.getFormData().then(formData => {
    let data = {
      procId: proc.value.procId,
      versionId: proc.value.lastVersionId,
      procInstId: procInstId.value,
      formData: formData,
      nodes: nodes.value,
      submit: flag === 1
    }

    addInst(data).then(response => {
      proxy.$modal.msgSuccess("提交成功");
      close();
    });
  }).catch(error => {
    // Form Validation failed
    proxy.$modal.msgError(error);
  })
}

function onFormDataChange() {
  console.log(111111)
  vFormRef.value.getFormData().then(formData => {
    console.log(222222)
    let data = {
      procId: proc.value.procId,
      versionId: proc.value.lastVersionId,
      procInstId: procInstId.value,
      formData: formData,
    }

    calculateNode(data).then(response => {
      console.log(333333, response)
      if (response.data != null) {
        nodes.value = response.data
      }
    });
  }).catch(error => {
    // Form Validation failed
    nodes.value = null
  })
}


function close() {
  open.value = false;
  emit("close");
}

defineExpose({
  show,
});
</script>

<style scoped lang="scss">
@import 'element-plus/dist/index.css';
.proc-ins {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;

  .proc-ins-header {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 3px #898484;

    .header-title {
      flex: 1;
      font-weight: bold;
      font-size: 16px;
      text-align: center;
    }
    .header-cancel {
      width: 100px;
      height: 50px;
      line-height: 50px;
      background-color: #409EFF;
      text-align: center;
      color: #FFFFFF;
      font-weight: bold;
      cursor: pointer;
    }
  }

  .proc-ins-body {
    flex: 1;
    overflow-y: auto;
    .proc-card {
      width: 1200px;
      margin: 10px auto;
      background-color: #FFFFFF;

      .proc-title{
        font-weight: bold;
        font-size: 16px;
        padding: 10px 0;
        //border-bottom: #f5f7fa solid 2px;
        margin-bottom: 10px;
      }

      .proc-submit {
        margin-top: 20px;
        .btn {
          width: 100px;
        }
      }
    }
  }

}
</style>